<!DOCTYPE html>

<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta charset="utf-8" />
	<title>宠物管理</title>

	<meta name="description" content="overview &amp; stats" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

	<!-- bootstrap & fontawesome -->
	<link rel="stylesheet" href="/assets/css/bootstrap.min.css" />
	<link rel="stylesheet" href="/assets/font-awesome/4.5.0/css/font-awesome.min.css" />

	<!-- page specific plugin styles -->
	<link rel="stylesheet" href="/assets/css/jquery-ui.min.css" />
	<link rel="stylesheet" href="/assets/css/bootstrap-datepicker3.min.css" />
	<link rel="stylesheet" href="/assets/css/ui.jqgrid.min.css" />

	<!-- text fonts -->
	<link rel="stylesheet" href="/assets/css/fonts.googleapis.com.css" />

	<!-- ace styles -->
	<link rel="stylesheet" href="/assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />

	<!--[if lte IE 9]>
	<link rel="stylesheet" href="/assets/css/ace-part2.min.css" class="ace-main-stylesheet" />
	<![endif]-->
	<link rel="stylesheet" href="/assets/css/ace-skins.min.css" />
	<link rel="stylesheet" href="/assets/css/ace-rtl.min.css" />

	<!--[if lte IE 9]>
	<link rel="stylesheet" href="/assets/css/ace-ie.min.css" />
	<![endif]-->

	<!-- inline styles related to this page -->

	<!-- ace settings handler -->
	<script src="/assets/js/ace-extra.min.js"></script>

	<!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->

	<!--[if lte IE 8]>
	<script src="/assets/js/html5shiv.min.js"></script>
	<script src="/assets/js/respond.min.js"></script>
	<![endif]-->
</head>

<body class="skin-3">
<script src="/assets/js/jquery-2.1.4.min.js"></script>
<div id="navbar" class="navbar navbar-default ace-save-state">
	<div class="navbar-container ace-save-state" id="navbar-container">
		<button type="button" class="navbar-toggle menu-toggler pull-left" id="menu-toggler" data-target="#sidebar">
			<span class="sr-only">Toggle sidebar</span>

			<span class="icon-bar"></span>

			<span class="icon-bar"></span>

			<span class="icon-bar"></span>
		</button>

		<div class="navbar-header pull-left">
			<a href="/jpetstore/main" class="navbar-brand">
				<small>
					<i class="fa fa-share-square-o"></i>
					<span class="red">MyPetStore</span>
					<span class="black">后台管理</span>
				</small>
			</a>
		</div>

		<div class="navbar-buttons navbar-header pull-right" role="navigation">
			<ul class="nav ace-nav">

				<li class="light-blue dropdown-modal">
					<a data-toggle="dropdown" href="#" class="dropdown-toggle">
						<img class="nav-user-photo" src="/assets/images/avatars/avatar2.png" alt="Jason's Photo" />
						<span class="user-info">
                              <small>Hello,管理员</small>
							<!--                           <div th:text="${session.account.username}"></div>-->
                           </span>

						<i class="ace-icon fa fa-caret-down"></i>
					</a>

					<ul class="user-menu dropdown-menu-right dropdown-menu dropdown-yellow dropdown-caret dropdown-close">
						<li>
							<a href="/jpetstore/profile">
								<i class="ace-icon fa fa-cog"></i>
								个人设置
							</a>
						</li>


						<li class="divider"></li>

						<li>
							<a href="#">
								<i class="ace-icon fa fa-power-off"></i>
								注销
							</a>
						</li>
					</ul>
				</li>
			</ul>
		</div>
	</div><!-- /.navbar-container -->
</div>

<div class="main-container ace-save-state" id="main-container">
	<script type="text/javascript">
		try{ace.settings.loadState('main-container')}catch(e){}
	</script>

	<div id="sidebar" class="sidebar                  responsive                    ace-save-state">
		<script type="text/javascript">
			try{ace.settings.loadState('sidebar')}catch(e){}
		</script>

		<ul class="nav nav-list">
			<li class="">
				<a href="/jpetstore/main">
					<i class="menu-icon fa fa-home"></i>
					<span class="menu-text"> 主页 </span>
				</a>

				<b class="arrow"></b>
			</li>
			<!--管理-->
			<li class="open">
				<a href="#" class="dropdown-toggle">
					<i class="menu-icon fa fa-list"></i>
					<span class="menu-text"> 管理 </span>

					<b class="arrow fa fa-angle-down"></b>
				</a>

				<b class="arrow"></b>

				<ul class="submenu">
					<li class="">
						<a href="/jpetstore/order">
							<i class="menu-icon fa fa-caret-right"></i>
							订单查询
						</a>

						<b class="arrow"></b>
					</li>

					<li class="active">
						<a href="/jpetstore/product">
							<i class="menu-icon fa fa-caret-right"></i>
							宠物管理
						</a>

						<b class="arrow"></b>
					</li>

					<li class="">
						<a href="/jpetstore/user">
							<i class="menu-icon fa fa-caret-right"></i>
							用户信息
						</a>

						<b class="arrow"></b>
					</li>
				</ul>
			</li>
			<!--管理员设置-->
			<li class="">
				<a href="/jpetstore/profile">
					<i class="menu-icon fa fa-user"></i>
					<span class="menu-text"> 管理员信息 </span>
				</a>

				<b class="arrow"></b>
			</li>
		</ul><!-- /.nav-list -->

		<div class="sidebar-toggle sidebar-collapse" id="sidebar-collapse">
			<i id="sidebar-toggle-icon" class="ace-icon fa fa-angle-double-left ace-save-state" data-icon1="ace-icon fa fa-angle-double-left" data-icon2="ace-icon fa fa-angle-double-right"></i>
		</div>
	</div>

	<div class="main-content">
		<div class="main-content-inner">
			<div class="breadcrumbs ace-save-state" id="breadcrumbs">
				<ul class="breadcrumb">
					<li>
						<i class="ace-icon fa fa-home home-icon"></i>
						<a href="/jpetstore/main">主页</a>
					</li>

					<li>
						<a href="#">管理</a>
					</li>
					<li class="active">宠物管理</li>
				</ul><!-- /.breadcrumb -->
			</div>

			<div class="page-content">
				<div class="ace-settings-container" id="ace-settings-container">
					<div class="btn btn-app btn-xs btn-warning ace-settings-btn" id="ace-settings-btn">
						<i class="ace-icon fa fa-cog bigger-130"></i>
					</div>

					<div class="ace-settings-box clearfix" id="ace-settings-box">
						<div class="pull-left width-50">
							<div class="ace-settings-item">
								<div class="pull-left">
									<select id="skin-colorpicker" class="hide">
										<option data-skin="no-skin" value="blue">#438EB9</option>
										<option data-skin="skin-1" value="#222A2D">#222A2D</option>
										<option data-skin="skin-2" value="#C6487E">#C6487E</option>
										<option data-skin="skin-3" value="#grey">#D0D0D0</option>

									</select>
								</div>
								<span>&nbsp; 选择背景色</span>
							</div>

							<div class="ace-settings-item">
								<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-hover" autocomplete="off" />
								<label class="lbl" for="ace-settings-hover"> 整理菜单</label>
							</div>

							<div class="ace-settings-item">
								<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-compact" autocomplete="off" />
								<label class="lbl" for="ace-settings-compact"> 收缩菜单</label>
							</div>

<!--							<div class="ace-settings-item">-->
<!--								<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-highlight" autocomplete="off" />-->
<!--								<label class="lbl" for="ace-settings-highlight"> Alt. Active Item</label>-->
<!--							</div>-->
						</div><!-- /.pull-left -->

					</div><!-- /.ace-settings-box -->
				</div><!-- /.ace-settings-container -->

				<div class="page-header">
					<h1>
						宠物管理
					</h1>
				</div><!-- /.page-header -->

				<div class="row">
					<div class="col-xs-12">
						<!-- PAGE CONTENT BEGINS -->
						<div class="tabbable">
							<ul class="nav nav-tabs padding-18 tab-size-bigger" id="myTab">
								<li class="active">
									<a data-toggle="tab" href="#faq-tab-1">
										<i class="blue ace-icon fa fa-inbox bigger-120"></i>
										货物列表
									</a>
								</li>

								<li>
									<a data-toggle="tab" href="#faq-tab-2">
										<i class="green ace-icon fa fa-pencil-square-o bigger-120"></i>
										货物管理
									</a>
								</li>
							</ul>

							<div class="tab-content no-border padding-24">
								<div id="faq-tab-1" class="tab-pane fade in active">

									<div class="row">
										<div class="col-xs-12">
											<!-- PAGE CONTENT BEGINS -->
											<table id="dynamic-table" class="table table-striped table-bordered table-hover">
												<thead>
												<tr>
													<th class="center">
														<label class="pos-rel">
															<input type="checkbox" class="ace" />
															<span class="lbl"></span>
														</label>
													</th>
													<th></th>
													<th>商品编号</th>
													<th>商品种类</th>
													<th>商品名称</th>
													<th>商品描述</th>

													<th></th>
												</tr>
												</thead>

												<tbody th:each="product:${productList}">
												<tr >
													<td class="center">
														<label class="pos-rel">
															<input type="checkbox" class="ace" />
															<span class="lbl"></span>
														</label>
													</td>
													<td>
													<div class="action-buttons">
														<a href="#" class="green bigger-140 show-details-btn" title="详细信息">
															<i class="ace-icon fa fa-angle-double-down"></i>
															<span class="sr-only">详细信息</span>
														</a>
													</div>
													</td>

													<td id="table_productId" th:text="${product.productId}"></td>
													<td id="table_categoryId" th:text="${product.categoryId}"></td>
													<td id="table_name" th:text="${product.name}"></td>
													<td id="table_description" th:text="${product.description}"></td>


													<td>
														<div class="hidden-sm hidden-xs action-buttons">


															<a id="edit" class="green" href="#">
																<i  class="ace-icon fa fa-pencil bigger-130"></i>
															</a>

															<a id="delete" class="red" href="#">
																<i  class="ace-icon fa fa-trash-o bigger-130"></i>
															</a>
														</div>

														<div class="hidden-md hidden-lg">
															<div class="inline pos-rel">
																<button class="btn btn-minier btn-yellow dropdown-toggle" data-toggle="dropdown" data-position="auto">
																	<i class="ace-icon fa fa-caret-down icon-only bigger-120"></i>
																</button>

																<ul class="dropdown-menu dropdown-only-icon dropdown-yellow dropdown-menu-right dropdown-caret dropdown-close">

																	<li>
																		<a href="#" class="tooltip-success" data-rel="tooltip" title="Edit">
                                                            <span class="green">
                                                               <i class="ace-icon fa fa-pencil-square-o bigger-120"></i>
                                                            </span>
																		</a>
																	</li>

																	<li>
																		<a href="#" class="tooltip-error" data-rel="tooltip" title="Delete">
                                                            <span class="red">
                                                               <i class="ace-icon fa fa-trash-o bigger-120"></i>
                                                            </span>
																		</a>
																	</li>
																</ul>
															</div>
														</div>
													</td>
												  </tr>



													</table>

											<div id="grid-pager"></div>
											<!-- PAGE CONTENT ENDS -->
										</div><!-- /.col -->
									</div><!-- /.row -->
								</div>

								<div id="faq-tab-2" class="tab-pane fade">
									<div class="col-sm-offset-1 col-sm-10">

										<div class="form-horizontal">
											<div class="tabbable">
												<ul class="nav nav-tabs padding-16">
													<li>
														<a id="tab_1" data-toggle="tab" href="#edit-category">
															种类添加
														</a>
													</li>

													<li>
														<a id="tab_2" data-toggle="tab" href="#edit-item">
															物品添加
														</a>
													</li>
													<li>
														<a id="tab_3" data-toggle="tab" href="#edit-product">
															货物添加
														</a>
													</li>
												</ul>

												<div id="tab-content" class="tab-content profile-edit-tab-content">
													<div class="space-10"></div>
													<div id="edits" class="tab-pane active">

													</div>

													<div id="edit-category" class="tab-pane active">
														<div class="space-10"></div>


														<form id="tab_form1" action="/jpetstore/addcategory" method="post">
															<div class="form-group">
																<label class="col-sm-3 control-label no-padding-right">种类编号</label>

																<div class="col-sm-9">
																	<input type="text" id="form-field-categoryId" name="categoryId" placeholder="英文大写" onkeyup="copyob1toob2()" />
																</div>
															</div>

															<div class="space-4"></div>

															<div class="form-group">
																<label class="col-sm-3 control-label no-padding-right">种类名称</label>

																<div class="col-sm-9">
																	<input type="text" id="form-field-categoryName" name="categoryName" readonly />
																</div>
															</div>

															<div class="form-group">
																<label class="col-sm-3 control-label no-padding-right">种类图片</label>

																<div class="col-sm-9">
																	<input class="col-sm-5" type="text" id="form-field-descn" name="categoryDescn" placeholder="图片位置" value="<image src='/images/birds_icon.gif'><font size='5' color='blue'> Birds</font>"/>
																</div>
															</div>

														</form>

													</div>

													<div id="edit-item" class="tab-pane">

														<form id="tab_form2" action="/jpetstore/additem" method="post" >


															<div class="form-group">
																<label class="col-sm-3 control-label no-padding-right" for="form-field-itemId">物品编号</label>

																<div class="col-sm-9">
																	<input name="itemId" class="col-sm-2" type="text" id="form-field-itemId" placeholder="格式：XXX-XX" />
																</div>
															</div>
															<div class="form-group">
																<label class="col-sm-3 control-label no-padding-right">物品种类</label>
																<div class="col-sm-9">
																	<select name="productId" id="form-field-productType" class="col-sm-2">
																	</select>
																</div>

															</div>
															<div class="space-4"></div>

															<div class="form-group">
																<label class="col-sm-3 control-label no-padding-right" for="form-field-unitcost">物品成本</label>

																<div class="col-sm-9">
																	<input name="unitcost" class="col-sm-2" type="text" id="form-field-unitcost" placeholder="" />
																</div>
															</div>

															<div class="space-4"></div>

															<div class="form-group">
																<label class="col-sm-3 control-label no-padding-right" for="form-field-listprice">物品售价</label>

																<div class="col-sm-9">
																	<input name="listprice" class="col-sm-2" type="text" id="form-field-listprice" placeholder="" />
																</div>
															</div>

															<div class="space-4"></div>

															<div class="form-group">
																<label class="col-sm-3 control-label no-padding-right" for="form-field-supplier">物品供应商</label>

																<div class="col-sm-9">
																	<input name="supplier" class="col-sm-2" type="text" id="form-field-supplier" placeholder="" />
																</div>
															</div>
															<div class="space-4"></div>

															<div class="form-group">
																<label class="col-sm-3 control-label no-padding-right" for="form-field-status">物品数量</label>

																<div class="col-sm-9">
																	<input name="quantity" class="col-sm-2" type="text" id="form-field-quantity" placeholder="" />
																</div>
															</div>

															<div class="space-4"></div>

															<div class="form-group">
																<label class="col-sm-3 control-label no-padding-right" for="form-field-status">物品状态</label>

																<div class="col-sm-9">
																	<input name="status" class="col-sm-2" type="text" id="form-field-status" placeholder="" value="P"/>
																</div>
															</div>

															<div class="space-4"></div>

															<div class="form-group">
																<label class="col-sm-3 control-label no-padding-right" for="form-field-attr">物品信息</label>

																<div class="col-sm-9">
																	<input name="attr" class="col-sm-2" type="text" id="form-field-attr" placeholder="" value=""/>
																</div>
															</div>

														</form>

													</div>
													<div id="edit-product" class="tab-pane">
														<form id="tab_form3" action="/jpetstore/addproduct" method="post" >

															<div class="form-group">
																<label class="col-sm-3 control-label no-padding-right">货物种类</label>
																<div class="col-sm-9">
																	<select name="categoryId" id="form-field-categoryType" class="col-sm-2">
																	</select>
																</div>

															</div>

															<div class="space-4"></div>

															<div class="form-group">
																<label class="col-sm-3 control-label no-padding-right">货物名称</label>

																<div class="col-sm-9">
																	<input name="name" class="col-sm-2" type="text" id="form-field-name" placeholder="" />
																</div>
															</div>

															<div class="space-4"></div>

															<div class="form-group">
																<label class="col-sm-3 control-label no-padding-right">货物编号</label>

																<div class="col-sm-9">
																	<input name="productId" class="col-sm-2" type="text" id="form-field-pruductId" placeholder="格式：XX-XX-XX" />
																</div>
															</div>

															<div class="space-4"></div>

															<div class="form-group">
																<label class="col-sm-3 control-label no-padding-right">货物描述</label>

																<div class="col-sm-9">
																	<input name="description" class="col-sm-5" type="text" id="form-field-description" placeholder="图片位置+描述"/>
																</div>
															</div>
														</form>

													</div>
												</div>
											</div>
											<div class="clearfix form-actions">
												<div class="col-md-offset-3 col-md-9">
													<button id="tab-submit" class="btn btn-info" type="button">
														<i class="ace-icon fa fa-check bigger-110"></i>
														提交
													</button>

													&nbsp; &nbsp;
													<button id="tab-reset" class="btn" type="reset">
														<i class="ace-icon fa fa-undo bigger-110"></i>
														重置
													</button>
												</div>
											</div>
										</div>
									</div>
								</div>

							</div>
						</div>

						<!-- PAGE CONTENT ENDS -->
					</div><!-- /.col -->
				</div><!-- /.row -->
			</div><!-- /.page-content -->
		</div>
	</div><!-- /.main-content -->

	<div class="footer">
		<div class="footer-inner">
			<div class="footer-content">
                  <span class="bigger-120">
                     <span class="blue bolder">Ace</span>
                     Application &copy; 2013-2014
                  </span>

				&nbsp; &nbsp;
				<span class="action-buttons">
                     <a href="#">
                        <i class="ace-icon fa fa-twitter-square light-blue bigger-150"></i>
                     </a>

                     <a href="#">
                        <i class="ace-icon fa fa-facebook-square text-primary bigger-150"></i>
                     </a>

                     <a href="#">
                        <i class="ace-icon fa fa-rss-square orange bigger-150"></i>
                     </a>
                  </span>
			</div>
		</div>
	</div>

	<a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
		<i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
	</a>
</div><!-- /.main-container -->

<!-- basic scripts -->
<div id="modal-table2" class="modal fade" tabindex="-1">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header no-padding">
				<div class="table-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
						<span class="white">&times;</span>
					</button>
					商品信息
				</div>
			</div>

			<div class="modal-body no-padding">
				<div class="hr hr-dotted"></div>
				<form action="/jpetstore/updateproduct" method="post" id="update_productfrom" class="form-horizontal" th:object="${updateProduct}">
					<div class="form-group">
						<label class="control-label col-xs-12 col-sm-3 no-padding-right">商品编号:</label>

						<div class="col-xs-12 col-sm-9">
							<div class="clearfix">
								<input th:field="*{productId}" id="modal2_productId" class="col-xs-12 col-sm-6" type="text" readonly="readonly">
							</div>
						</div>
					</div>

					<div class="hr hr-dotted"></div>

					<div class="form-group">
						<label class="control-label col-xs-12 col-sm-3 no-padding-right">商品类型:</label>

						<div class="col-xs-12 col-sm-9">
							<div class="clearfix">

									<input th:field="*{categoryId}" id="modal2_categoryId" class="col-xs-12 col-sm-6" type="text" >

							</div>
						</div>
					</div>

					<div class="space-2"></div>

					<div class="form-group">
						<label class="control-label col-xs-12 col-sm-3 no-padding-right">商品名称:</label>

						<div class="col-xs-12 col-sm-9">
							<div class="clearfix">
								<input th:field="*{name}" id="modal2_name" class="col-xs-12 col-sm-6" type="text">
							</div>
						</div>
					</div>

					<div class="hr hr-dotted"></div>

					<div class="form-group">
						<label class="control-label col-xs-12 col-sm-3 no-padding-right">商品描述:</label>

						<div class="col-xs-12 col-sm-9">

							<div class="clearfix">
								<input  th:field="*{description}" id="modal2_description" class="input-small" type="text" >

							</div>
						</div>
					</div>

					<hr>
				</form>
			</div>

			<div class="modal-footer no-margin-top">
				<button id="product-success" class="btn btn-sm btn-success pull-left" data-last="Finish">
					<i class="ace-icon fa fa-check"></i>
					提交
				</button>
				<button class="btn btn-sm btn-danger" data-dismiss="modal">
					<i class="ace-icon fa fa-times"></i>
					关闭
				</button>

			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal-dialog -->
</div>
<!-- basic scripts -->

<div id="modal-table1" class="modal fade" tabindex="-1">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header no-padding">
				<div class="table-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
						<span class="white">&times;</span>
					</button>
					商品信息
				</div>
			</div>

			<div class="modal-body no-padding">
				<div class="hr hr-dotted"></div>
				<form >
					<table  class="table table-striped table-bordered table-hover">
						<thead>
						<tr>
							<th>物品编号</th>
							<th>售价</th>
							<th>成本</th>
							<th>供应商</th>
							<th>状态</th>
							<th>属性</th>
							<th>数量</th>
							<th>操作</th>

							<th></th>
						</tr>
						</thead>
						<tbody id="inner_table">

						</tbody>

					</table>
				</form>
			</div>

			<div class="modal-footer no-margin-top">
				<button class="btn btn-sm btn-success pull-left" data-last="Finish">
					<i class="ace-icon fa fa-check"></i>
					提交
				</button>
				<button class="btn btn-sm btn-danger" data-dismiss="modal">
					<i class="ace-icon fa fa-times"></i>
					关闭
				</button>

			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal-dialog -->
</div>

<!-- basic scripts -->
<div id="modal-table3" class="modal fade" tabindex="-1">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header no-padding">
				<div class="table-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
						<span class="white">&times;</span>
					</button>
					商品信息
				</div>
			</div>

			<div class="modal-body no-padding">
				<div class="hr hr-dotted"></div>
				<form action="/jpetstore/updateitem" method="post" id="update_itemfrom" class="form-horizontal" th:object="${updateItem}">
					<div class="form-group">
						<label class="control-label col-xs-12 col-sm-3 no-padding-right">商品编号:</label>

						<div class="col-xs-12 col-sm-9">
							<div class="clearfix">
								<input th:field="*{itemId}" id="modal3_itemId" class="col-xs-12 col-sm-6" type="text" readonly="readonly">
							</div>
						</div>
					</div>

					<div class="hr hr-dotted"></div>

					<div class="form-group">
						<label class="control-label col-xs-12 col-sm-3 no-padding-right">商品售价:</label>

						<div class="col-xs-12 col-sm-9">
							<div class="clearfix">

								<input th:field="*{listPrice}" id="modal3_listPrice" class="col-xs-12 col-sm-6" type="text" >

							</div>
						</div>
					</div>

					<div class="space-2"></div>

					<div class="form-group">
						<label class="control-label col-xs-12 col-sm-3 no-padding-right">商品成本:</label>

						<div class="col-xs-12 col-sm-9">
							<div class="clearfix">
								<input th:field="*{unitCost}" id="modal3_unitCost" class="col-xs-12 col-sm-6" type="text">
							</div>
						</div>
					</div>

					<div class="hr hr-dotted"></div>

					<div class="form-group">
					<label class="control-label col-xs-12 col-sm-3 no-padding-right">商品供应商:</label>

					<div class="col-xs-12 col-sm-9">

						<div class="clearfix">
							<input  th:field="*{supplierId}" id="modal3_supplierId" class="input-small" type="text" >

						</div>
					</div>
				</div>
					<div class="form-group">
						<label class="control-label col-xs-12 col-sm-3 no-padding-right">商品状态:</label>

						<div class="col-xs-12 col-sm-9">

							<div class="clearfix">
								<input  th:field="*{status}" id="modal3_status" class="input-small" type="text" >

							</div>
						</div>
					</div>
					<div class="form-group">
						<label class="control-label col-xs-12 col-sm-3 no-padding-right">商品描述:</label>

						<div class="col-xs-12 col-sm-9">

							<div class="clearfix">
								<input  th:field="*{attribute1}" id="modal3_attribute1" class="input-small" type="text" >

							</div>
						</div>
					</div>
					<div class="form-group">
						<label class="control-label col-xs-12 col-sm-3 no-padding-right">商品数量:</label>

						<div class="col-xs-12 col-sm-9">

							<div class="clearfix">
								<input  th:field="*{quantity}" id="modal3_quantity" class="input-small" type="text" >

							</div>
						</div>
					</div>

					<hr>
				</form>
			</div>

			<div class="modal-footer no-margin-top">
				<button id="item-success" class="btn btn-sm btn-success pull-left" data-last="Finish">
					<i class="ace-icon fa fa-check"></i>
					提交
				</button>
				<button class="btn btn-sm btn-danger" data-dismiss="modal">
					<i class="ace-icon fa fa-times"></i>
					关闭
				</button>

			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal-dialog -->
</div>

<!--[if !IE]> -->
<script src="/assets/js/jquery-2.1.4.min.js"></script>

<!-- <![endif]-->

<!--[if IE]>
<script src="/assets/js/jquery-1.11.3.min.js"></script>
<![endif]-->
<script type="text/javascript">
	if('ontouchstart' in document.documentElement) document.write("<script src='/assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
</script>
<script src="/assets/js/bootstrap.min.js"></script>

<!-- page specific plugin scripts -->
<script src="/assets/js/bootstrap-datepicker.min.js"></script>
<script src="/assets/js/jquery.jqGrid.min.js"></script>
<script src="/assets/js/grid.locale-en.js"></script>
<!-- ace scripts -->
<script src="/assets/js/ace-elements.min.js"></script>
<script src="/assets/js/ace.min.js"></script>

<!-- inline scripts related to this page -->
<script type="text/javascript">









	function copyob1toob2(){
		var categoryId = document.getElementById("form-field-categoryId");
		categoryId = categoryId.value;
		categoryId = categoryId.split("");
		for (var i = 1;i <categoryId.length;i++){
			categoryId[i]=categoryId[i].toLowerCase();
		}
		$("#form-field-categoryName").val(categoryId.join(""));
	}

	$(document).ready(function () { //此处页面打开即请求api
		$('#dynamic-table').delegate('.fa-trash-o','click',function(){
			var productId = $(this).closest('tr').find("td[id='table_productId']").text();
			$.ajax({
				type:"get",
				url:"/jpetstore/deleteproduct",
				data:{
					"productId":productId
				},
				dataType:"text",

				success:function(data){
					if (data == "fail"){

					}else {
						console.log(data);
					//	window.location.href = "/jpetstore/product";//指向登录的页面地址
					}
				}
			});
		});
		$('#dynamic-table').delegate('.fa-pencil','click',function(){
			var productId = $(this).closest('tr').find("td[id='table_productId']").text();
			$.ajax({
				type:"get",
				url:"/jpetstore/getProduct",
				data:{
					"productId":productId
				},
				dataType:"json",

				success:function(data){
					$("#modal2_productId").val(data.productId);
					$("#modal2_categoryId").val(data.categoryId);
					$("#modal2_name").val(data.name);
					$("#modal2_description").val(data.description);
					$("#modal-table2").modal("show");
				}
			});
		});
		$('#product-success').on('click',function (e) {

			$('#update_productfrom').submit();
		//	var url = this.href;
		//	e.preventDefault();
		//	$('#dynamic-table').load(url + " #dynamic-table");
			//window.location.reload()//刷新当前页面
			$('#dynamic-table').reload();//刷新最顶端对象（用于多开窗口）
		//	window.location.href = "/jpetstore/product"
		});

		$('#inner_table').delegate('.fa-trash-o','click',function(){
			var itemId = $(this).closest('tr').find("td[id='itemId']").text();
			$.ajax({
				type:"get",
				url:"/jpetstore/deleteitem",
				data:{
					"itemId":itemId
				},
				dataType:"text",

				success:function(data){
					if (data == "fail"){

					}else {
						console.log(data);
					//	window.location.href = "/jpetstore/product";//指向登录的页面地址
					}
				}
			});
		});
		$('#inner_table').delegate('.fa-pencil','click',function(){
			var itemId = $(this).closest('tr').find("td[id='itemId']").text();
			$.ajax({
				type:"get",
				url:"/jpetstore/getitem",
				data:{
					"itemId":itemId
				},
				dataType:"json",

				success:function(data){
					$("#modal3_itemId").val(data.itemId);
					$("#modal3_attribute1").val(data.attribute1);
					$("#modal3_listPrice").val(data.listPrice);
					$("#modal3_status").val(data.status);
					$("#modal3_supplierId").val(data.supplierId);
					$("#modal3_unitCost").val(data.unitCost);
					$("#modal3_quantity").val(data.quantity);
					$("#modal-table3").modal("show");
				}
			});
		});
		$('#item-success').on('click',function (e) {

			$('#update_itemfrom').submit();
			//	var url = this.href;
			//	e.preventDefault();
			//	$('#dynamic-table').load(url + " #dynamic-table");
			//window.location.reload()//刷新当前页面
			//	$('#dynamic-table').//刷新最顶端对象（用于多开窗口）
		//	window.location.href = "/jpetstore/product";
		});


		$.ajax({
			type:'GET',
			url:"/jpetstore/getcategory",
			dataType: "json",
			success: function (data) {
				var optionstring = "";
				for (var j = 0; j < data.length;j++) {
					optionstring += "<option value=\"" + data[j].categoryId + "\" >" +data[j].name + "</option>";
					$("#form-field-categoryType").html(optionstring);
				}
			},

			error: function (msg) {
				layer.msg('数据出错了!!');
			}
		});
		$.ajax({
			type:'GET',
			url:"/jpetstore/getproducts",
			dataType: "json",
			success: function (data) {
				var optionstring = "";
				for (var j = 0; j < data.length;j++) {
					optionstring += "<option value=\"" + data[j].productId + "\" >" +data[j].name + "</option>";
					$("#form-field-productType").html(optionstring);
				}
			},

			error: function (msg) {
				layer.msg('数据出错了!!');
			}
		});
	});

	jQuery(function($) {
		var tabIndex = 1;

		$("#tab-submit").on('click', function () {
			if (tabIndex === 1) {
				alert(tabIndex);
				$("#tab_form1").submit();
			} else if (tabIndex === 2) {
				$("#tab_form2").submit();
				alert(tabIndex);
			} else if (tabIndex === 3) {
				$("#tab_form3").submit();
				alert(tabIndex);
			}
		});

		$("#tab_1").on('click', function () {
			tabIndex = 1;
		});

		$("#tab_2").on('click', function () {
			tabIndex = 2;

		});

		$("#tab_3").on('click', function () {
			tabIndex = 3;

		});
	});



		//switch element when editing inline
		function aceSwitch( cellvalue, options, cell ) {
			setTimeout(function(){
				$(cell) .find('input[type=checkbox]')
						.addClass('ace ace-switch ace-switch-5')
						.after('<span class="lbl"></span>');
			}, 0);
		}
		//enable datepicker
		function pickDate( cellvalue, options, cell ) {
			setTimeout(function(){
				$(cell) .find('input[type=text]')
						.datepicker({format:'yyyy-mm-dd' , autoclose:true});
			}, 0);
		}

	function style_edit_form(form) {
		//enable datepicker on "sdate" field and switches for "stock" field
		form.find('input[name=sdate]').datepicker({format:'yyyy-mm-dd' , autoclose:true})

		form.find('input[name=stock]').addClass('ace ace-switch ace-switch-5').after('<span class="lbl"></span>');
		//don't wrap inside a label element, the checkbox value won't be submitted (POST'ed)
		//.addClass('ace ace-switch ace-switch-5').wrap('<label class="inline" />').after('<span class="lbl"></span>');


		//update buttons classes
		var buttons = form.next().find('.EditButton .fm-button');
		buttons.addClass('btn btn-sm').find('[class*="-icon"]').hide();//ui-icon, s-icon
		buttons.eq(0).addClass('btn-primary').prepend('<i class="ace-icon fa fa-check"></i>');
		buttons.eq(1).prepend('<i class="ace-icon fa fa-times"></i>')

		buttons = form.next().find('.navButton a');
		buttons.find('.ui-icon').hide();
		buttons.eq(0).append('<i class="ace-icon fa fa-chevron-left"></i>');
		buttons.eq(1).append('<i class="ace-icon fa fa-chevron-right"></i>');
	}

	function style_delete_form(form) {
		var buttons = form.next().find('.EditButton .fm-button');
		buttons.addClass('btn btn-sm btn-white btn-round').find('[class*="-icon"]').hide();//ui-icon, s-icon
		buttons.eq(0).addClass('btn-danger').prepend('<i class="ace-icon fa fa-trash-o"></i>');
		buttons.eq(1).addClass('btn-default').prepend('<i class="ace-icon fa fa-times"></i>')
	}

	function style_search_filters(form) {
		form.find('.delete-rule').val('X');
		form.find('.add-rule').addClass('btn btn-xs btn-primary');
		form.find('.add-group').addClass('btn btn-xs btn-success');
		form.find('.delete-group').addClass('btn btn-xs btn-danger');
	}
	function style_search_form(form) {
		var dialog = form.closest('.ui-jqdialog');
		var buttons = dialog.find('.EditTable')
		buttons.find('.EditButton a[id*="_reset"]').addClass('btn btn-sm btn-info').find('.ui-icon').attr('class', 'ace-icon fa fa-retweet');
		buttons.find('.EditButton a[id*="_query"]').addClass('btn btn-sm btn-inverse').find('.ui-icon').attr('class', 'ace-icon fa fa-comment-o');
		buttons.find('.EditButton a[id*="_search"]').addClass('btn btn-sm btn-purple').find('.ui-icon').attr('class', 'ace-icon fa fa-search');
	}

	function enableTooltips(table) {
		$('.navtable .ui-pg-button').tooltip({container:'body'});
		$(table).find('.ui-pg-div').tooltip({container:'body'});
	}
	// });

	$('.show-details-btn').on('click', function(e) {
		e.preventDefault();
	//	$(this).closest('tr').next().toggleClass('open');
	//	$(this).find(ace.vars['.icon']).toggleClass('fa-angle-double-down').toggleClass('fa-angle-double-up');
		var productId = $(this).closest('tr').find("td[id='table_productId']").text();
		console.log(productId);
		$.ajax({
			type:"get",
			url:"/jpetstore/getitems",
			data:{
				"productId":productId
						//{content:$('#table_productId').val()}
			},
			dataType:"text",

			success:function(data){
				if (data == "fail"){

				}else {
					$("#modal-table1").modal("show");
				//	console.log(data);
				//	alert(data);
					var json=eval("("+data+")");
					//alert(json.Supplier);
					$('#inner_table').empty();
					for(var i=0;i<json.length;i++)
					{
						$('#inner_table').append(
								"<tr>"+
								"<td id='itemId'>" + json[i].itemId + "</td>" +
								"<td >" +json[i].listPrice +"</td>"+
								"<td >" + json[i].unitCost +"</td>"+
								"<td >" + json[i].supplierId +"</td>"+

								"<td >" + json[i].status +"</td>"+

								"<td>" + json[i].attribute1 +"</td>"+
								"<td>" + json[i].quantity +"</td>"+"<td>"+"\t\t<div class=\"hidden-sm hidden-xs action-buttons\">\n" +
								"\n" +
								"\n" +
								"\t<a  class=\"green\" href=\"#\">\n" +
								"\t<i  class=\"ace-icon fa fa-pencil bigger-130\"></i>\n" +
								"\t</a>\n" +
								"\n" +
								"\t<a  class=\"red\" href=\"#\">\n" +
								"\t<i  class=\"ace-icon fa fa-trash-o bigger-130\"></i>\n" +
								"\t</a>\n" +
								"\t</div>\n" +
								"\n" +
								"\t<div class=\"hidden-md hidden-lg\">\n" +
								"\t<div class=\"inline pos-rel\">\n" +
								"\t<button class=\"btn btn-minier btn-yellow dropdown-toggle\" data-toggle=\"dropdown\" data-position=\"auto\">\n" +
								"\t<i class=\"ace-icon fa fa-caret-down icon-only bigger-120\"></i>\n" +
								"\t</button>\n" +
								"\n" +
								"\t<ul class=\"dropdown-menu dropdown-only-icon dropdown-yellow dropdown-menu-right dropdown-caret dropdown-close\">\n" +
								"\n" +
								"\t<li>\n" +
								"\t<a href=\"#\" class=\"tooltip-success\" data-rel=\"tooltip\" title=\"Edit\">\n" +
								"                                                            <span class=\"green\">\n" +
								"                                                               <i class=\"ace-icon fa fa-pencil-square-o bigger-120\"></i>\n" +
								"                                                            </span>\n" +
								"\t</a>\n" +
								"\t</li>\n" +
								"\n" +
								"\t<li>\n" +
								"\t<a href=\"#\" class=\"tooltip-error\" data-rel=\"tooltip\" title=\"Delete\">\n" +
								"                                                            <span class=\"red\">\n" +
								"                                                               <i class=\"ace-icon fa fa-trash-o bigger-120\"></i>\n" +
								"                                                            </span>\n" +
								"\t</a>\n" +
								"\t</li>\n" +
								"\t</ul>\n" +
								"\t</div>\n" +
								"\t</div>"+"</td>"+"</tr>"

						);
					}

				//	window.location.href = "/jpetstore/product";//指向登录的页面地址
				}
			}
		});
	});
</script>
</body>
</html>
<!-- inline scripts related to this page -->
<!-- inline scripts related to this page -->


